<template>
  <div class="container-companyManagement">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物流信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 -->
    <div class="mainBox">
      <div class="mainTitle">公司管理</div>
      <div class="mainEditor">
        <el-button
          type="success"
          icon="el-icon-edit-outline"
          size="small"
          @click="dialogFormVisible = true"
          >添加</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="deleteSelectCompony"
          >删除</el-button
        >
        <el-button
          type="warning"
          size="small"
          icon="el-icon-edit"
          @click="editorSelectCompony"
          >编辑</el-button
        >
      </div>
      <div class="mainTable">
        <!-- 表格 -->
        <el-table
        :fit="true"
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          class="tabalBox"
          @selection-change="handleSelectComponyChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column type="index" width="45" label="序号"></el-table-column> -->
          <el-table-column prop="name" label="公司名称"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="status" label="公司审核状态"> </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditCompony(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteCompony(scope.$index, scope.row)"
                :disabled="stateNum===0?false:true"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="reqParams.pageNum"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="reqParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="添加公司信息"
      :visible.sync="dialogFormVisible"
      width="476px"
      :destroy-on-close="true"
    >
      <add-company @closeDialog="closeDialog"></add-company>
    </el-dialog>
    <el-dialog
      title="编辑公司信息"
      :visible.sync="dialogEditeVisible"
      width="476px"
    >
    <edite-company @closeEditeComponyDialog="closeEditeCompony" :edite-option="editeOption"></edite-company>
    </el-dialog>
   </div>
</template>

<script>
import { getItem } from '../../utils/storage'
export default {
  name: 'companyManagement',
  components: {
    EditeCompany: () => import('./editeCompany/editeCompany'),
    AddCompany: () => import('./addCompany/addCompany')
  },
  data () {
    return {
      reqParams: {
        address: '',
        clientId: null,
        name: '',
        page: 1,
        phone: '',
        size: 10,
        status: null
      },
      stateNum: null,
      tableData: [],
      // 控制添加表单
      dialogFormVisible: false,
      // 控制编辑表单
      dialogEditeVisible: false,
      total: 0,
      isChecked: false,
      // 选中的选项的所有id
      selectComponyId: [],
      editeOption: {}
    }
  },
  created () {
    this.getComponyList()
  },
  methods: {
    // 获取后台数据
    async getComponyList () {
      this.reqParams.clientId = getItem('userInfo').clientId
      this.stateNum = parseInt(this.reqParams.clientId)
      // console.log(typeof (this.stateNum))
      const res = await this.$http({
        url: '/api/platApi/client/findByCondition',
        method: 'post',
        data: this.reqParams
      })
      if (res.status === 200 && res.data.code === 1) {
        this.tableData = res.data.data.records
        this.tableData.forEach(el => {
          el.status = el.status === 1 ? '激活' : '未激活'
        })
        this.total = res.data.data.total
      } else {
        this.$message({
          message: res.data.msg,
          type: 'error'
        })
      }
    },
    // 点击删除按钮，删除对应选项
    handleDeleteCompony (index, val) {
      this.$confirm('此操作将永久删除该公司, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$http.get('/api/platApi/client/deleteById', { params: { id: val.id } })
        if (res.status === 200 && res.data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          if (this.total === ((this.reqParams.size * (this.reqParams.page - 1)) + 1)) {
            this.$nextTick(function () {
              this.reqParams.page = this.reqParams.page - 1
              this.getComponyList()
            })
          }
          this.getComponyList()
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleEditCompony (index, val) {
      // 点击编辑按钮，跳转出添加添加弹窗
      this.dialogEditeVisible = true
      // 将点击项的值传递给组件
      this.editeOption = val
    },
    // 点击选项，获取选中的项的id，点击删除时，可以批量删除
    handleSelectComponyChange (val) {
      if (val.length === 0) {
        this.isChecked = false
      } else {
        this.isChecked = true
        this.selectComponyId = []
        val.forEach((item, i) => {
          this.selectComponyId.push(item.id)
        })
      }
    },
    // 每页显示总条数
    handleSizeChange (val) {
      this.reqParams.size = val
      this.getComponyList()
    },
    handleCurrentChange (newPage) {
      this.reqParams.page = newPage
      this.getComponyList()
    },
    // 点击表上方的删除功能
    async deleteSelectCompony () {
      if (!this.isChecked) {
        this.$message({
          message: '还没有选择要删除的内容',
          type: 'warning'
        })
      } else if (this.selectComponyId.length > 1) {
        this.$message({
          message: '每次只能删除一条信息',
          type: 'warning'
        })
      } else {
        this.$confirm('此操作将永久删除该公司, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.get('/api/platApi/client/deleteById', { params: { id: this.selectComponyId[0] } })
          if (res.status === 200 && res.data.code === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            if (this.total === ((this.reqParams.size * (this.reqParams.page - 1)) + 1)) {
              this.$nextTick(function () {
                this.reqParams.page = this.reqParams.page - 1
                this.getComponyList()
              })
            }
            this.getComponyList()
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 上方的编辑按钮
    editorSelectCompony () {
      // 先判断是否选中
      if (!this.isChecked) {
        this.$message({
          message: '还没有选择要编辑的内容',
          type: 'warning'
        })
      } else if (this.selectComponyId.length > 1) {
        this.$message({
          message: '每次只能编辑一条信息',
          type: 'warning'
        })
      } else {
        // 根据选中的选项的id,获取后台的相应数据，展示在表格中
        this.dialogEditeVisible = true
        // 将数据传给子组件
        this.editeOption = this.tableData.filter((item) => {
          return this.selectComponyId[0] === item.id
        })[0]
        // console.log(this.editeOption)
      }
    },
    closeDialog () {
      this.dialogFormVisible = false
      this.getComponyList()
    },
    closeEditeCompony () {
      this.dialogEditeVisible = false
      this.getComponyList()
    }
  }
}
</script>

<style scoped lang="less">
.el-button {
  margin-top: 20px;
}
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
  /deep/thead {
    color: #333;
  }
  // /deep/tr {
  //   padding: 0 !important;
  //   height: 20px;
  //   line-height: 20px;
  //   font-size: 12px;
  // }
  /deep/td {
    padding: 0 !important;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .el-button {
    margin: 5px;
  }
}
.el-dialog {
  width: 20%;
}
</style>
